<template>
	<div class="rightcontainer">
		<div class="rightmain">
			<div class="title">{{title}}</div>
			<div class="zcontent">{{content}}</div>
			<div class="footbtn">
				<el-button type="primary" @click="accessit" :disabled="loading">同意并继续{{loading?('（ '+lastsec+'s ）'):''}}</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		data() {
			return {
				id:this.$route.query.id,
				loading:true,
				lastsec:10,
				title:'',
				content:''
			};
		},
		computed: {
		},
		mounted() {
			this.getchengnuo()
		},
	
		methods: {
			async getchengnuo(){
				var res=await this.$api.Join.Getchengnuo({id:this.id})
				this.list=res.data
				this.title=res.data.examinationName+'考试承诺书'
				this.content=res.data.attention
				setInterval(()=>{
					this.lastsec--
					if(this.lastsec<=0){
						this.loading=false
					}
				},1000)
			},
			async accessit(){
				var res=await this.$api.Join.Isfull({id:this.id})
				if(res.type=='success'){
					this.$router.push({ name: 'Joinfo', query:{id:this.id}})
				}else{
					this.$message.error(res.msg)
					this.loading=false
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.rightcontainer {
		width: 920px;
		margin: 0 auto 40px;
		overflow: hidden;

		.rightmain {
			width: 100%;
			margin: 20px 0;

			.title {
				height:70px;
				color:#3C3C3C;
				font-size:26px;
				font-weight:bold;
				display:flex;
				justify-content:center;
				align-items: center;
			}
			.zcontent{
				color:#595959;
				font-size:16px;
				line-height:32px;
				background-color:#fff;
				margin-top:8px;
			}
			.footbtn{
				height:140px;
				display:flex;
				align-items: center;
				justify-content:center;
			}
		}
	}
</style>
